<template>
	<view class="binduserinfo">
		<view class="pagetitle">请填写以下个人信息:</view>
		<view class="pagecont">
			<view>
				<text>姓名</text>
				<input type="text" v-model="form.username" placeholder="请填写你的姓名"/>
			</view>
			<view>
				<text>性别</text>
				<view class="sex">
					<view @click="form.sexActive = 1">
						<image v-if="form.sexActive == 0" :src="vuex_httpImageUrl && vuex_httpImageUrl+'/static/common/sexcheck.png'"></image>
						<image v-else :src="vuex_httpImageUrl && vuex_httpImageUrl+'/static/common/sexcheck1.png'"></image>
						<text>男</text>
					</view>
					<view @click="form.sexActive = 0">
						<image v-if="form.sexActive == 1" :src="vuex_httpImageUrl && vuex_httpImageUrl+'/static/common/sexcheck.png'"></image>
						<image v-else :src="vuex_httpImageUrl && vuex_httpImageUrl+'/static/common/sexcheck1.png'"></image>
						<text>女</text>
					</view>
				</view>
			</view>
			<view>
				<text>出生日期</text>
				<input type="text" :placeholder="form.dateVal" @click="visible = true" disabled/>
			</view>
			<view>
				<text>手机号码</text>
				<input type="text" v-model="form.mobile" maxlength="11" placeholder="请填写您的手机号码" />
			</view>
			<view>
				<text>备注</text>
				<input type="text" v-model="form.msg" placeholder="请输入留言信息" />
			</view>
		</view>
		
		<view class="isTy" @click="isTyActive = !isTyActive">
			<image v-if="isTyActive == 0" :src="vuex_httpImageUrl && vuex_httpImageUrl+'static/common/sexcheck.png'"></image>
			<image v-else :src="vuex_httpImageUrl && vuex_httpImageUrl+'static/common/sexcheck1.png'"></image>
			<view>
				我已阅读并同意
				<text @click.stop="C_xieyi">《用户隐私协议》</text>
			</view>
		</view>
		
		<view class="submit" @click="C_submit">确定并提交</view>
		
		 <w-picker
			:visible.sync="visible"
			mode="date" 
			:current="true"
			fields="day"
			@confirm="C_choosedate"
			@cancel="visible = false"
			:disabled-after="false"
			ref="date" 
		></w-picker>
		
		<uni-popup ref="popup" type="center">
			<view class="model">
				<view class="title">协议与政策</view>
				<view class="cont">
					<view> 感谢您信任并使用该软件。再您使用 某某软件服务前，请认真阅读《用户协议》 和《隐私政策》的全部内容，以了解用户权 利义务和个人信息处理规则。 </view>
					<view> 如果您未满16周岁，您还需要通知您的 监护人共同阅读《儿童隐私政策》，点击 “同意”即表示您和您的监护人已阅读并同 意全部条款。 </view>
				</view>
				<view class="btn">
					<view class="submit" @click="$refs.popup.close()">确定</view>
					<!-- <view class="submit" @click="C_isty(0)">同意</view>
					<view @click="C_isty(1)">我再想想</view> -->
				</view>
			</view>
		</uni-popup>
		
		
	</view>
</template>

<script>
	import yz from '@/common/yz.js'
	export default {
		data() {
			return {
				visible:false,
				isTyActive:false,
				form:{
					username:'',
					sexActive:1,
					dateVal:'请选择您的出生日期',
					mobile:'',
					msg:''
				},
				pageId:''
			};
		},
		onReady() {
			// this.$refs.popup.open()
		},
		onLoad(o) {
			this.pageId = o.id
		},
		methods:{
			C_xieyi(){
				this.$refs.popup.open()
			},
			// C_isty(state){
			// 	state?this.$refs.popup.close():uni.navigateBack()
			// },
			C_choosedate(e){
				this.form.dateVal = e.value
			},
			C_submit(){
				if(!this.isTyActive){this.$u.toast('请先阅读用户隐私');return};
				let {username,sexActive,dateVal,mobile,msg} = this.form
				if(!username){this.$u.toast('请输入您的姓名');return};
				if(dateVal == '请选择您的出生日期'){this.$u.toast('请选择您的出生日期');return};
				if(!yz.isMobile(mobile)){this.$u.toast('请输入正确的手机号');return};
				
				this.$u.post('/shop/applymall',{
					name	:username,
					gender	:sexActive == 1?'男':'女',
					birthday:dateVal,
					phone	:mobile,
					remark	:msg,
					mallarticles_id:this.pageId
				}).then(res=>{
					console.log(res);
					this.$u.toast(res.msg)
					setTimeout(_=>{
						uni.navigateBack()
					},700)
				})
			}
		}
	}
</script>

<style lang="scss">
	.binduserinfo {
		width: 90%;
		margin: 30rpx auto;
		.pagetitle{
			font-size: 35rpx;
			font-weight: bold;
			margin: 30rpx 0;
		}
		.pagecont{
			background-color: #FFFFFF;
			padding: 0 35rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			margin-bottom: 40rpx;
			>view{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 100rpx;
				border-bottom: 1px solid #F1F1F1;
				&:last-child{
					border-bottom: 0;
				}
				.sex{
					display: flex;
					align-items: center;
					>view{
						margin-left: 35rpx;
					}
					image{
						position: relative;
						top: 5rpx;
						width: 30rpx;
						height: 30rpx;
						margin-right: 5rpx;
					}
				}
				input{
					text-align: right;
				}
			}
			
		}
		.isTy{
			display: flex;
			image{
				position: relative;
				top: 7rpx;
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}
			>view{
				>text{
					color: #2A6AB1;
				}
			}
		}
		>.submit{
			width: 80%;
			padding: 20rpx;
			text-align: center;
		}
		
		
		.model{
			background-color: #FFFFFF;
			width: 80%;
			margin: auto;
			padding: 30rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			>view{
				&.cont{
					text-indent: 2em;
					color:#858585 ;
				}
				&.title{
					font-size: 35rpx;
					font-weight: bold;
					text-align: center;
					text-indent: 0;
					margin: 0 0 30rpx 0;
				}
				&.btn{
					text-align: center;
					color:#858585 ;
					.submit{
						padding: 20rpx;
					}
				}
			}
			
		}
		
	}
</style>
